<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它.
    口 float 属性最初只用于在一段文本内浮动图像，实现文字环绕的效果;
    口 但是早期的CSS标准中并没有提供好的左右布局方案,因此在一段时间里面它成为网页多列布局的最常用工具 
    
    绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

    可以通过foat属性让元素产生浮动效果，foat的常用取值

    口 none: 不浮动，默认值
    口left: 向左浮动
    口 right: 向右浮动
    */

    /* 浮动规则一
    
        元素一旦浮动后，脱离标准流
            口 朝着向左或向右方向移动，直到自己的边界紧贴着包含块 (一般是父元素)或者其他浮动元素的边界为止
            口 定位元素会层叠在浮动元素上面

        浮动规则二

        -如果元素是向左(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界

        浮动规则三
    
        浮动元素之间不能层叠
        口如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素(左浮找左浮，右浮找右浮口如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

        浮动规则四

        浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
        口比如行内级元素、inline-block元素、块级元素的文字内容
        
        浮动规则五
        规则五: 行内级元素、inline-block元素浮动后，其顶部将与所在行的质部对齐
    */
    body{
        margin: 0;
        padding: 0;
    }
    .item1, .item2{
        background-color: #f00;
    }
    .item1{
        /* 脱离标准流 */
        float: left;
        /* 定位脱离标准流 */
        /* position: fixed;
        left: 0;
        top: 10px; */
        background-color: #0f0;
    }
    .item2{
        float: right;
    }
    .box{
        width: 200px;
        height: 200px;
        background-color: orange;
        margin: 0 auto;
        padding: 10px;
    }
    .content img{
        width: 100px;
        padding: 10px;
        float: left;
    }
    /* 练习 */
    .fudong span{
        background-color: orange;
        float: left;
        margin-right: 5px;
        height: 20px;
        width: 20px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }
    .fudong span:nth-last-child(-n+2){
        width: 40px;
    }
</style>
<body>
    <div class="box">
        <div class="item1">1</div>
        <div class="item2">2</div>
    </div>
    <div>---------------图文环绕(现在用的比较少) -----------------</div>
    <div class="content">
        <img src="https://image3.cdn.seaart.ai/static/0d46839f6371fb84f6b6c682f5fc2c77/20230418/bf7ca304ef1305a8abad4b80ad4a6279.jpeg" alt="">
        今天上午，有关艺人蔡徐坤的消息在互联网上发酵，话题讨论热度不见，也有人发现不少粉丝开始抛售有关蔡徐坤的周边商品。这一消息引发了网友的热议，也让不少粉丝失望，纷纷在二手平台上出售蔡徐坤的相关商品。据统计，目前已有超过400件蔡徐坤的周边产品被挂出出售，价格从9元到18500元不等，而且这个数字还在不断增加。据悉，蔡徐坤现在正在泰国曼谷举行演唱会。他的工作室微博最新的一条动态也是关于“蔡徐坤2023迷巡回演唱会”的宣传。同时，有不少粉丝在其工作室微博账号评论留言，要求快点出来解释、给个说法。

        “C先生不要太勇”称，2021年5月20日蔡徐坤和一位C姓女生在北京朝阳区某KTV经朋友介绍相识，两人聚会结束后于21日凌晨发生了性关系。时隔一个月后，C女士去医院检查显示已经怀孕，蔡徐坤的反应就是“打掉”；7月5日，C女士独自去医院打了胎。蔡母得知此事后，怀疑C女士故意设局想要敲诈自己儿子，询问蔡当晚发生性关系时有没有采取避孕措施，蔡徐坤表示没有。蔡母一边让工作人员联系C女士赔偿，一边让私家侦探跟踪C女士，在其家门口非法安装针孔摄像头。
    </div>

    <div><h3>浮动练习</h3></div>
    <!-- 
        将多个行内级元素中间的空格(间隙) 
        去除的方法
        1.除换行符(不推荐)
        2.将父级元的font-size 设置为，但是需要子元素设置回来 
        3.浮动
        4.flex布局
    -->
    <div class="fudong">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>...</span>
        <span>10</span>
        <span>下一页</span>
        <span>尾页</span>
    </div>
</body>
</html>